import React, { useState,useEffect } from 'react';
import { Table, Form, Button, Space } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import Add from './addUnit';
import Edit from './editUnit';
import styles from './styles.module.scss';



const mapStateToProps = state => ({ unitList: state.adminPage.unitList,count:state.adminPage.count });

const mapDispatchToProps = dispatch => {
    return {
      getUnitList: dispatch.adminPage.getUnitList,
      addUnit:dispatch.adminPage.addUnit,
      deleteUnit:dispatch.adminPage.deleteUnit,
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(({ count,unitList, getUnitList, addUnit, deleteUnit }) => {
    unitList.forEach((item,index)=>{
      item.key= index;
    })
    // let needData = [{unitId:'nslb1',name:'中石化内蒙古销售公司',address:'呼和浩特'},{unitId:'nsyb4',name:'中石油华北石油管理局',address:'河北任丘'}]
    // needData.push(unitList[0])
    // const dataSources = needData
    const loading = unitList.length;
    const tableColumn = [
        {
            title: 'ID',
            key: 'unitId',
            dataIndex: 'unitId',
        },
        {
            title: '单位名称',
            key: 'name',
            dataIndex: 'name',
        },
        {
            title: '单位地点',
            key: 'address',
            dataIndex: 'address'
        },
        {
            title: '权限',
            key: 'role',
            dataIndex: 'role'
        },
        {
            title: '操作',
            key: 'action',
            render:(text,record) => (
              <Space key='actions' size="middle">
                <Edit record={record}></Edit>
                <Button type="text" key='delete'  onClick={()=>{
                  deleteUnit({unitId:record.unitId})
                }}>删除</Button>
              </Space>
            )
        }
    ];

    useEffect(() => {
        getUnitList();
    }, [count]);

    return (
        <div className={ styles.container }>
            <Form layout="inline">
                <Form.Item>
                    <Add addUnit={addUnit}></Add>
                </Form.Item>
            </Form>
            <Table className={ styles.table } loading={ loading } dataSource={ unitList } bordered columns={ tableColumn }/>
        </div>
    );
}));